<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :cssLayoutLabel
 * @Date         : 2023-11-23 18:29:13
 * @LastEditTime: 2024-02-23 14:03:12
-->
<template>
  <chartGenerateConfig
    v-if="config.generate.configType === GenerateType.基础"
    :config="config"
    chart-type="none"
  >
    <g-field :level="2" label-span="6" label="TOP显示类型">
      <g-select v-model="config.generate.type" :data="topShowTypes" />
    </g-field>
    <g-field :level="2" label-span="6" label="间距">
      <g-input-number
        v-model="config.global.barGap"
        inline
        label="文本与进度间距"
        suffix="px"
      />
      <g-input-number
        v-model="config.global.titleLeft"
        inline
        label="标题与TOP间距"
        suffix="px"
      />
      <g-input-number
        v-model="config.global.progressLeft"
        inline
        label="进度与数量间距"
        suffix="px"
      />
      <g-input-number
        v-model="config.top.padding"
        inline
        label="TOP内边距"
        suffix="px"
      />
    </g-field>
  </chartGenerateConfig>
  <el-tabs
    v-else-if="config.generate.configType === GenerateType.全量"
    key="cardleft"
    tab-position="left"
    type="card"
  >
    <el-tab-pane label="全局" tab="global">
      <g-field
        :level="2"
        tooltip="使用返回数据中的哪个字段进行排序"
        label="排序字段"
      >
        <g-input v-model="config.global.rankKey" />
      </g-field>
      <g-field :level="2" label="间距">
        <g-input-number
          v-model="config.global.titleLeft"
          inline
          label="标题与TOP间距"
          suffix="px"
        />
        <g-input-number
          v-model="config.global.countLeft"
          inline
          label="数值与图表间距"
          suffix="px"
        />
        <g-input-number
          v-model="config.global.progressLeft"
          inline
          label="进度与数量间距"
          suffix="px"
        />
      </g-field>
    </el-tab-pane>
    <el-tab-pane label="TOP" tab="global">
      <g-field-collapse
        v-model="config.top.show"
        :level="2"
        toggle
        label-span="4"
        label="显示TOP"
      >
        <g-field :level="2" label="尺寸">
          <g-input-number
            v-model="config.top.width"
            inline
            label="宽度"
            suffix="px"
          />
          <g-input-number
            v-model="config.top.height"
            inline
            label="高度"
            suffix="px"
          />
        </g-field>
        <g-field :level="2" label="内边距">
          <g-input-number
            v-model="config.top.padding"
            inline
            label="TOP内边距"
            suffix="px"
          />
        </g-field>
        <g-field :level="2" label-span="6" label="前缀">
          <g-input v-model="config.top.prefix" />
        </g-field>
        <g-field :level="2" label="前几显示TOP">
          <g-input-number
            v-model="config.top.showNum"
            :min="0"
            label="当设置为0时为全部显示"
          />
        </g-field>
        <!-- <g-field :level="2" label="背景色">
          <g-color-picker v-model="config.top.background" />
        </g-field> -->
        <g-field :level="2" label="边框">
          <g-color-picker v-model="config.top.borderColor" inline />
          <g-select v-model="config.top.borderType" :data="lineStyles" inline />
          <g-input-number
            v-model="config.top.borderWidth"
            :min="0"
            label="边框宽度"
            inline
          />
        </g-field>
        <g-field :level="2" label="边框圆角">
          <g-input-number
            v-model="config.top.borderRadius[0]"
            suffix="px"
            :min="0"
            label="左上圆角"
            inline
          />
          <g-input-number
            v-model="config.top.borderRadius[1]"
            suffix="px"
            :min="0"
            label="右上圆角"
            inline
          />
          <g-input-number
            v-model="config.top.borderRadius[2]"
            suffix="px"
            :min="0"
            label="左下圆角"
            inline
          />
          <g-input-number
            v-model="config.top.borderRadius[3]"
            suffix="px"
            :min="0"
            label="右下圆角"
            inline
          />
        </g-field>
        <g-field :level="2" label="字体">
          <GChartFontConfig :config="config.top.font" />
        </g-field>
      </g-field-collapse>
    </el-tab-pane>
    <el-tab-pane label="标题" tab="title">
      <g-field :level="2" label-span="4" label="字体">
        <GChartFontConfig :config="config.title.font" />
      </g-field>
    </el-tab-pane>
    <el-tab-pane label="数量" tab="count">
      <g-field-collapse
        v-model="config.count.show"
        :level="2"
        toggle
        label-span="4"
        label="显示数量"
      >
        <g-field :leval="2" label="顺序" label-span="4">
          <g-switch v-model="config.count.inStart" label="数量显示在占比前" />
        </g-field>
        <g-field :leval="2" label="字体" label-span="4">
          <GChartFontConfig :config="config.count.font" />
        </g-field>
      </g-field-collapse>
    </el-tab-pane>
    <el-tab-pane label="占比" tab="progress">
      <g-field-collapse
        v-model="config.progress.show"
        :level="2"
        toggle
        label-span="4"
        label="显示占比"
      >
        <g-field :leval="2" label="字体" label-span="4">
          <GChartFontConfig :config="config.progress.font" />
        </g-field>
      </g-field-collapse>
    </el-tab-pane>
    <el-tab-pane label="进度图" tab="bar">
      <g-field :level="2" label="高度">
        <g-input-number v-model="config.bar.width" :min="0" />
      </g-field>
      <g-field :level="2" label="背景颜色">
        <g-color-picker v-model="config.bar.background" />
      </g-field>
      <g-field :level="2" label="边框">
        <g-color-picker v-model="config.bar.borderColor" inline />
        <g-select v-model="config.bar.borderType" :data="lineStyles" inline />
        <g-input-number
          v-model="config.bar.borderWidth"
          :min="0"
          label="边框宽度"
          inline
        />
      </g-field>
      <g-field :level="2" label="边框圆角">
        <g-input-number
          v-model="config.bar.borderRadius[0]"
          suffix="px"
          :min="0"
          label="左上圆角"
          inline
        />
        <g-input-number
          v-model="config.bar.borderRadius[1]"
          suffix="px"
          :min="0"
          label="右上圆角"
          inline
        />
        <g-input-number
          v-model="config.bar.borderRadius[2]"
          suffix="px"
          :min="0"
          label="左下圆角"
          inline
        />
        <g-input-number
          v-model="config.bar.borderRadius[3]"
          suffix="px"
          :min="0"
          label="右下圆角"
          inline
        />
      </g-field>
      <g-field-collapse
        v-model="config.bar.showIcon"
        :level="2"
        toggle
        label-span="4"
        label="显示图标"
      >
        <g-field :level="2" label="图标尺寸">
          <g-input-number
            v-model="config.bar.iconStyle.width"
            suffix="px"
            :min="1"
            label="宽度"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.height"
            suffix="px"
            :min="1"
            label="高度"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.top"
            suffix="px"
            :min="1"
            label="Y轴偏移量"
            inline
          />
        </g-field>
        <g-field :level="2" label="背景颜色">
          <g-color-picker v-model="config.bar.iconStyle.background" />
        </g-field>
        <g-field :level="2" label="边框">
          <g-color-picker v-model="config.bar.iconStyle.borderColor" inline />
          <g-select
            v-model="config.bar.iconStyle.borderType"
            :data="lineStyles"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.borderWidth"
            :min="0"
            label="边框宽度"
            inline
          />
        </g-field>
        <g-field :level="2" label="边框圆角">
          <g-input-number
            v-model="config.bar.iconStyle.borderRadius[0]"
            suffix="px"
            :min="0"
            label="左上圆角"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.borderRadius[1]"
            suffix="px"
            :min="0"
            label="右上圆角"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.borderRadius[2]"
            suffix="px"
            :min="0"
            label="左下圆角"
            inline
          />
          <g-input-number
            v-model="config.bar.iconStyle.borderRadius[3]"
            suffix="px"
            :min="0"
            label="右下圆角"
            inline
          />
        </g-field>
        <g-field label="图标图片">
          <g-upload-image v-model="config.bar.iconStyle.image" />
        </g-field>
      </g-field-collapse>
    </el-tab-pane>
    <el-tab-pane label="轮播" tab="scroll">
      <GSwiperConfig :config="config.swiper" />
    </el-tab-pane>
    <el-tab-pane label="流光" tab="stream">
      <g-field :level="2" label="宽度">
        <g-input-number v-model="config.global.streamer.width" suffix="px" />
      </g-field>
      <g-field :level="2" label="颜色">
        <g-color-picker v-model="config.global.streamer.color" />
      </g-field>
      <g-field :level="2" label="动画速度">
        <g-input-number v-model="config.global.streamer.speed" suffix="ms" />
      </g-field>
    </el-tab-pane>
  </el-tabs>
  <el-tabs
    v-else
    key="series"
    v-model="activeTab"
    tab-position="left"
    type="card"
    addable
    :closable="config.series.length > 1"
    class="iking-v-custom-series"
    @tab-remove="handRemoveSeriesItem"
    @tab-add="handleAddSeriesItem"
  >
    <el-tab-pane
      v-for="(item, index) in config.series"
      :key="index"
      :label="`系列${index + 1}`"
      :tab="`系列${index + 1}`"
      :name="index"
    >
      <g-field label="右侧图片">
        <g-upload-image v-model="item.config.top.image" />
      </g-field>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref, toRef } from 'vue'
import { ScrollRank, ScrollRankSeries } from './scroll-rank'
import { ElTabs, ElTabPane } from 'element-plus'

export default defineComponent({
  name: 'VScrollRankProp',
  components: {
    ElTabs,
    ElTabPane,
  },
  props: {
    com: {
      type: Object as PropType<ScrollRank>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')
    const { activeTab, handleAddSeriesItem, handRemoveSeriesItem } = useSeries(
      config,
      ScrollRankSeries,
    )

    // const handleAddSeriesItem = () => {
    //   config.value.series.push(
    //     new ScrollRankSeries(`TOP${config.value.series.length + 1}`)
    //   );
    // };

    // const handRemoveSeriesItem = (index) => {
    //   config.value.series.splice(index, 1);
    // };

    return {
      config,
      activeTab,
      handleAddSeriesItem,
      handRemoveSeriesItem,
      fontFamilys: GlFontFamilys,
      cssLayoutlr: GlCssLayoutlr,
      cssLayoutLabel: GlCssLayoutLabel,
      hAligns: GlHAligns,
      vAligns: GlVAligns,
      orients: GlOrients,
      waperEffects: GlWaperEffects,
      lineStyles: GlLineStyles,
      topShowTypes: GlTopShowTypes,
      GenerateType: EGenerateType,
    }
  },
})
</script>
